<template>
  <div>
    <h1>平台账户</h1>
       <div class="container">
  <div class="row" >
   <div class="elem">
    <h3><span>账户余额 </span></h3>
    <span>￥{{money}}</span>
    <div>
       <h3> <span>冻结资金</span></h3>
       <span>￥{{lockmoney}}</span>
    </div>
        <button @click="pay">充值</button> <button @click="withdraw">提现</button>
    </div>
  </div>
 </div>
        <el-form ref="form" :model="form" label-width="80px" v-show="isshow">
  <el-form-item label="充值金额">
    <el-input v-model="form.money"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">确认充值</el-button>
    <el-button>取消</el-button>
  </el-form-item>
    </el-form>
    </div>

</template>

<script>
export default {
    data(){
        return{
            form:{
                money:'',
            },
               userid:localStorage.getItem('userid'),
               isshow:false,
               money:0,
               lockmoney:0,

        }
    },
    methods:{
        withdraw(){
            alert('暂未开放')
        },
        onSubmit(){
            this.axios.get('payurl?money='+this.form.money+'&userid='+this.userid)
            .then(res=>{
                window.location.href = res.data.url
            })
        },
        pay(){
            this.isshow = true
        },
        getmoney(){
            this.axios.get('getusermoney?userid='+this.userid)
            .then(res=>{
                this.money = res.data.money
                this.lockmoney = res.data.lockmoney
            })
        }
    },
    mounted(){
        this.getmoney()
    }

}
</script>

<style>
  .container{ 
 width:900px; 
  height:auto; 
  margin:auto; 
 } 
 .row{  
 width:900px; 
  height:auto;  
 display: flex; 
  background-color:#ffffff;
} 
 .elem{   
margin-top:20px;  
 margin-right:80px;    

 flex:1;  
 background-color:#EEE; 
  height:200px; 
 }
  .tall-elem{  
 height:500px; 
} 
 .child{ 
  margin:20px 20px 0px 20px; 
  background-color:yellow ; 
  width:calc(100% - 40px); 
  height:100px;  
} 
.div-left{width:100px;height:120px; float:left}
.left{width:10px;height:120px; float:left}
</style>